<template>
	<view class="index-box">
		<!--二维码框-->
		<view class="code-box flex-ct" v-if="false">
			<image class="code" src="/assets/img/del_4.jpg" show-menu-by-longpress></image>
		</view>
		<!--  公用标题-->
		<view class="module-title u-font-32 fw-bold flex-sb">
			<text class="">{{dataList.detailed[0].fk_pro_id>0?'配送中':'已收款'}}</text>
			<text class="">2021-10-21</text>
		</view>
		<!--  商品信息-->
		<view class="prod-box">
			<view class="prod-list">
				<view class="prod-item flex-tb" v-for="(item,index) in dataList.detailed" :key="index">
					<image class="pi-img" :src="item.product_img || vuex_config.errImg"></image>
					<view class="pi-r">
						<view class="pi-name van-ellipsis u-font-32 l-40">
							{{item.fk_pro_id>0 ? item.product_name:'线下收款'}}</view>
						<view class="pi-date u-font-28 c-99 l-36">用餐时间：{{item.date_creation | gettime}}</view>
						<view class="pi-price u-font-28 l-36 c-66">
							<text>单价：{{item.price}}</text>
							<text class="u-font-24 u-m-l-5">x</text>
							<text class="u-font-24 u-m-l-5">{{item.num}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="prod-total u-font-32">
				<text class="">总价：</text>
				<text class="c-df1">￥{{dataList.total_amount}}</text>
			</view>
		</view>
		<!--  公用标题-->
		<view class="module-title u-font-32 fw-bold flex-sb">
			订单信息
		</view>
		<!--  订单信息-->
		<view class="order-info">
			<!--    <van-cell title="区域" value="金融城绿地中心" size="large" border="{{false}}"></van-cell>-->
			<u-cell-item title="配送地址" :value="dataList.address" :value-style="style" :arrow="false"></u-cell-item>
			<u-cell-item title="配送号码" :value="dataList.mobile" :arrow="false"></u-cell-item>
			<u-cell-item title="订单编号" :value="dataList.order_no" :arrow="false"></u-cell-item>
			<u-cell-item title="下单时间" :value="dataList.date_creation | gettime" :arrow="false"></u-cell-item>
		</view>
	</view>
</template>

<script>
	import {
		formatDate
	} from '@/utils/moment/index'
	export default {
		data() {
			return {
				dataList: [],
				style: {
					textAlign: 'left',
					paddingLeft: '20rpx'
				},
			}
		},
		onLoad(optons) {
			this.init({
				pk_id: optons.id
			})
		},
		filters: {
			gettime(time) {
				return formatDate(time, 'YYYY-MM-DD HH:mm:ss')
			}
		},
		methods: {
			init(params) {
				this.$resPost('GetOrderDetailedInfo', {
					...params
				}).then(res => {
					this.dataList = res.data
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.index-box {
		box-sizing: border-box;
		padding: 32rpx;

		.code-box {
			width: 100%;
			height: 374rpx;
			background-color: #FFFFFF;
			border-radius: 16rpx;
		}

		.flex-ct {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.flex-sb {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.c-66 {
			color: #666666;
		}

		// .l-36{line-height: 36;}
		.c-99 {
			color: #999999;
		}

		.flex-tb {
			display: flex;
			align-items: center;
		}

		// .l-40{line-height: 40;}
		.van-ellipsis {
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis
		}

		.pi-date {
			padding: 15rpx 0;
		}

		.code {
			width: 300rpx;
			height: 300rpx;
			border-radius: 16rpx;
		}

		.module-title {
			width: 100%;
			height: 104rpx;
		}

		/*商品信息*/
		.prod-box {
			width: 100%;
			background: rgba(255, 255, 255, 1);
			border-radius: 16rpx;
			padding: 24rpx;
		}

		.prod-list {
			width: 100%;
		}

		.prod-item {
			width: 100%;
			min-height: 120rpx;
			margin-bottom: 20rpx;
		}

		.pi-img {
			width: 120rpx;
			height: 120rpx;
			margin-right: 24rpx;
			border-radius: 16rpx;
		}

		.pi-r {
			flex: 1;
			overflow: hidden;
		}

		.prod-total {
			width: 100%;
			line-height: 60rpx;
			text-align: right;
		}

		.other-info,
		.pay-info {
			width: 100%;
			border-radius: 16rpx;
			overflow: hidden;
			margin-top: 24rpx;
		}
	}
</style>
